<template>
  <div class="content">
    <van-nav-bar
      @click-left="$router.push('/index')"
      left-arrow
      title="海报"
      fixed
      @click-right="$router.push('/search')"
    >
      <template #right> <van-icon name="search" size="18" /> </template
    ></van-nav-bar>
    <div class="poster_type">
      <ul>
        <li :class="{ active: type == 1 }" @click="setType(1)">
          共享海报
          <i></i>
        </li>
        <li :class="{ active: type == 2 }" @click="setType(2)">
          我的海报
          <i></i>
        </li>
      </ul>
    </div>

    <!-- 海报 -->
    <div class="main" v-if="posterArr.length !== 0">
      <div
        class="item"
        @click="$router.push(`/postDetail?id=${item.id}&from=post`)"
        v-for="item in posterArr"
        :key="item.id"
      >
        <img :src="$publicObj.urlImg(item.cover)" alt="" />
        <img
          src="../../assets/images/task/getMoney.png"
          alt=""
          class="money"
          v-show="item.type == 9"
        />
        <div class="share">
          <span>已分享：{{ item.share || 0 }}次</span>
        </div>
      </div>
    </div>

    <van-empty description="暂无数据" v-else />
  </div>
</template>

<script>
export default {
  data() {
    return {
      posterArr: [], //海报列表
      page: 1, //当前页数,
      totalPage: "",
      agentId: "",
      wxUserInfo: {}, //微信用户个人信息
      type: 1,
      tabelType: 1,
    };
  },

  async mounted() {
    this.agentId = sessionStorage.getItem("agentId");

    this.getPosterList();
  },

  methods: {
    // 切换
    setType(n) {
      this.type = n;
      this.getPosterList();
    },
    //获取海报列表
    async getPosterList() {
      let obj = {
        limit: 10000000,
        page: 1,
        agentId: this.agentId,
        tabelType: 3,
        sortType: null, //排序
      };

      if (this.type == 1) {
        obj.type = 10;
      }
      let res = await this.$api.getPosterList(obj);
      if (res.code != 0) return;
      this.posterArr = res.data.list;
    },
  },
};
</script>

<style scoped lang="less">
.poster_type {
  margin-top: 46px;
  background-color: #fff;
  ul {
    display: -webkit-flex;
    display: flex;
    justify-content: space-evenly;
    li {
      font-size: 16px;
      color: #666;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      position: relative;
      align-items: center;
      padding: 5px 0;
      i {
        width: 28px;
        height: 3px;

        border-radius: 3px;
        position: absolute;
        bottom: 0;
      }
    }
    .active {
      font-weight: 700;
      color: #000;
      i {
        background-color: #0264d1;
      }
    }
  }
}
.content {
  padding: 15px 15px 0;

  .main {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: calc(100vh - 150px);
    overflow-y: scroll;
    .item {
      margin-top: 14px;
      width: 48%;
      height: 165px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
      .money {
        width: 35px;
        height: 35px;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: none;
      }
      .share {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 30px;
        width: 100%;
        background-color: rgba(90, 90, 90, 0.5);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        span {
          margin-right: 10px;
          font-size: 10px;
          color: #f3f5f7;
        }
      }
    }
  }
}
</style>
